<style>
	.editTable .label {
		min-width: 60px;
		width: 60px;
	}

	.depInputClass {
		border: 1px solid #ffa8a8;
		background-color: #fff3f3;
	}
</style>
<form id="editForm" method="post">
	<input type="hidden" name="id" id="id">
	<table class="editTable">
		<tr>
			<td class="label">分组名称</td>
			<td><input type="text" name="depName" class="topjui-textbox"
			           data-options="required:true,validType:'length[1,40]'"
			           style="width: 200px;">
			</td>
			<td class="label">上级分组</td>
			<td>
				<input name="parentDepId" id="parentDepId" type="hidden" value="0"/>
				<input name="parentDepName" id="edit-department" type="text" data-toggle="topjui-textbox" readonly
				       value="" class="depInputClass"
				       style="width: 200px;height: 32px;" onclick="showMenu();"/>
			</td>
		</tr>
		<tr>
			<td class="label">联系人</td>
			<td><input type="text" name="attention" class="topjui-textbox"
			           data-options="validType:'length[0,20]'"
			           style="width: 200px;">
			</td>
			<td class="label">联系电话</td>
			<td><input type="text" name="tel" class="topjui-textbox"
			           data-options="validType:'length[0,30]'"
			           style="width: 200px;">
			</td>
		</tr>
		<tr>
			<td class="label">地址</td>
			<td colspan="3">  <textarea style="width: 475px;height:80px;"
			                            maxlength="250" name="location"></textarea>
			</td>
		</tr>
	</table>
</form>


<div id="depTree-win" class="topjui-dialog" title="分组树形" data-options="closed:true,iconCls:'icon-save',modal:true"
     style="width:500px;height:400px;">
	<ul id="zTree" class="ztree" style="margin: 3px;"></ul>
</div>

<script type="text/javascript">

	/*	var zNodes = [
	 {id: 1, pId: 0, name: "分组 1", open: true},
	 {id: 11, pId: 1, name: "分组 1-1", open: true},
	 {id: 111, pId: 11, name: "分组 1-1-1"},
	 {id: 112, pId: 11, name: "分组 1-1-2"},
	 {id: 12, pId: 1, name: "分组 1-2", open: true},
	 {id: 121, pId: 12, name: "分组 1-2-1"},
	 {id: 122, pId: 12, name: "分组 1-2-2"},
	 ];*/


	//ztree初始化设置
	var setting = {
		view: {
			dblClickExpand: false
		},
		data: {
			simpleData: {
				enable: true,
			}
		},
		callback: {
			onClick: onClick,
			//onCheck: onCheck
		}
	};
	//数据

	function onClick(e, treeId, treeNode) {

		if (treeNode) {
			var name = treeNode.name;
			if (name == '不选择分组') {
				name = '';
			}
			$("#edit-department").val(name);
			$("#edit-department").removeClass('depInputClass');
			/*	if (treeNode.id == -1) {
			 $("#parentDepId").val(0);
			 } else {*/
			$("#parentDepId").val(treeNode.id);
			//}
			hideMenu();
		}

	}

	function onCheck(e, treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("zTree"),
				nodes = zTree.getCheckedNodes(true),
				v = "",
				id = "";
		code = ""
		for (var i = 0, l = nodes.length; i < l; i++) {
			v += nodes[i].name + ",";
			id += nodes[i].id + ","
			code += nodes[i].code + ","
		}
		if (v.length > 0) {
			v = v.substring(0, v.length - 1);
			id = id.substring(0, id.length - 1);
			code = code.substring(0, code.length - 1);
		}
		$("#edit-department").val(v);
		$("#parentDepId").val(id);
	}

	function showMenu() {
		$("#depTree-win").dialog('open');
		$.post(path + "/dep/parentDepTree", function (data) {
			//console.info(data);
			/*var root = [{
			 id: "-1",
			 pId: "-1",
			 name: '不选择分组',
			 icon: path + '/static/plugins/ztree/css/zTreeStyle/img/diy/dep.png',
			 open: 'true'
			 }];
			 $.fn.zTree.init($("#zTree"), setting, root.concat(data));*/
			$.fn.zTree.init($("#zTree"), setting, data);
			var treeObj = $.fn.zTree.getZTreeObj("zTree");
			var nodes = treeObj.getNodes();
			if (nodes.length > 0) {
				for (var i = 0; i < nodes.length; i++) {
					treeObj.expandNode(nodes[i], true, false, false);
				}
			}
		});

	}
	function hideMenu() {
		$("#depTree-win").dialog('close');
	}

</script>

